<template>
  <div class="action-btn-list">
    <template v-for="action in getActions">
      <template v-if="action.confirm">
        <n-popconfirm v-bind="action"
                      :placement="action.confirm['placement'] ? action.confirm['placement'] : 'top-end'">
          <template #trigger>
            <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
          </template>
          {{ action.confirm['text'] }}
        </n-popconfirm>
      </template>
      <template v-else>
        <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
      </template>
    </template>
    <n-dropdown :show-arrow="true"
                v-if="dropDownActions && getDropdownList.length"
                trigger="hover"
                :options="getDropdownList"
                @select="select"
                size="small"
                placement="bottom-end">
      <slot name="more"></slot>
      <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
        <div class="flex items-center">
          <span>更多</span>
          <n-icon size="14" class="ml-1">
            <DownOutlined/>
          </n-icon>
        </div>
      </n-button>
    </n-dropdown>
  </div>
</template>

<script lang="ts" setup>
import {ActionItem} from '../../types/actions.ts';
import {isArray, isObject} from '@/util/is.ts';
import {computed, toRefs, unref} from 'vue';
import {DownOutlined} from '@vicons/antd';
import {UseAppStore} from "@/stores/app.ts";
import {permsJudg} from '@/util/index.ts'

const appStore = UseAppStore();

const props = defineProps({
  actions: {
    type: Array as PropType<ActionItem[]>,
    default: null,
    required: true,
  },
  dropDownActions: {
    type: Array as PropType<ActionItem[]>,
    default: null,
  },
  style: {
    type: String as PropType<String>,
    default: "text",
  },
  select: {
    type: Function as PropType<Function>,
    default: () => {
    },
  },
})
const {style, actions, dropDownActions} = toRefs(props)
//操作按钮样式
const actionType = unref(style) === "button"
    ? "default"
    : unref(style) === "text"
        ? "primary"
        : "default";
const actionText = unref(style) === "button"
    ? undefined
    : unref(style) === "text"
        ? true
        : undefined;
//更多操作按钮
const getMoreProps = computed(() => {
  return {
    text: actionText,
    type: actionType,
    size: "small",
  };
});
const isPermission = (action: ActionItem): boolean => {
  const {permission} = action;
  let flag=true;
  if (permission == undefined && appStore.permissionDisabled) {
    flag=true;
  } else if (permission == undefined && !appStore.permissionDisabled) {
    flag=false;
  } else if (permission) {
    let value:string;
    let isDisabled: boolean = false;
    if (isArray(permission) || isObject(permission)) {
      if (isObject(permission)) {
        value = permission['action'];
        isDisabled = permission['effect'] != undefined && permission['effect'] == 'disabled';
      } else {
        value = permission[0];
      }
    } else {
      // @ts-ignore
      value = permission;
    }
    const hasPermission=permsJudg(value);
    if (hasPermission){
      flag=true;
    }else{
      flag=!hasPermission && appStore.permissionDisabled || !hasPermission && isDisabled;
    }
  }
  return  flag;
}
const hasPermissionAct = (action: ActionItem) => {
  const {permission} = action;
  if (permission == undefined && appStore.permissionDisabled){
    action.disabled=true;
  }else if (permission){
    let value:string;
    let isDisabled: boolean = false;
    if (isArray(permission) || isObject(permission)) {
      if (isObject(permission)) {
        value = permission['action'];
        isDisabled = permission['effect'] != undefined && permission['effect'] == 'disabled';
      } else {
        value = permission[0];
      }
    } else {
      // @ts-ignore
      value = permission;
    }
    const hasPermission=permsJudg(value);
    if (!hasPermission && appStore.permissionDisabled || !hasPermission && isDisabled){
      action.disabled=true;
    }
  }
}
const getActions:any = computed(() => {
  return (unref(actions) || [])
      .filter((action: any) => {
        return isPermission(action);
      }).map((action) => {
        const {popConfirm} = action;
        hasPermissionAct(action)
        //需要展示什么风格，自己修改一下参数
        return {
          size: "small",
          text: actionText,
          type: actionType,
          ...action,
          ...(popConfirm || {}),
        };
      });
})
const getDropdownList:any = computed(() => {
  return (unref(props.dropDownActions) || []).filter((action: any) => {
    return isPermission(action);
  }).map((action) => {
    const {popConfirm} = action;
    hasPermissionAct(action)
    return {
      size: "small",
      text: actionText,
      type: actionType,
      ...action,
      ...popConfirm,
    };
  });
});
</script>

<style scoped lang="">

</style>